<template>
  <!-- 小店详情-关联视频 -->
  <div class="videoAnalysisShop">
    <div class="vip_pay_box" v-if="!vipRootObj[159][188].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[159][188].ownerMinLevel" />
      </div>
    </div>
    <template v-else>
      <div class="top">
        <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="videoData">
        <div class="title">视频数据</div>
        <div class="volume">
          <div>
            视频总销量
            <span>{{volume}}</span>
          </div>
          <div>
            视频总销售额
            <span>{{amount}}</span>
          </div>
        </div>
      </div>
      <div class="chart_box">
        <div>
          <p class="title">视频时长分布</p>
          <div>
            <BigPie v-if="durationList.length" :valueData="durationList" />
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading2&&!durationList.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div>
          <p class="title">视频数量趋势</p>
          <div>
            <KChart
              v-if="trendX.length&&trendY.length"
              name1="视频数量趋势"
              toolTip="带货视频"
              title="视频数"
              :xData="trendX"
              :series1="trendY"
            />
            <div
              v-loading="loading3"
              v-if="loading3"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading3&&!trendX.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 视频列表 -->
      <div class="videoList">
        <div class="title">视频列表</div>
        <!-- <div class="dis_flex">
          <div class="searchBox">
            <el-input
              type="text"
              v-model="KeyWord"
              @keyup.enter.native="toSearch"
              placeholder="请输入视频名称关键词搜索"
            ></el-input>
            <div class="imgBox cursor" @click="toSearch"></div>
          </div>
          <img class="check cursor" src="@/assets/meng/s1.png" v-if="!IsShieldDel" @click="check" />
          <img class="check cursor" src="@/assets/meng/s2.png" v-else @click="check" />
          <span class="txt cursor" @click="check">屏蔽已删除视频</span>
        </div>-->
        <table class="table">
          <thead>
            <tr>
              <th>视频</th>
              <th>达人</th>
              <th>时长</th>
              <th>发布时间</th>
              <th @click="sort_fun(true, 3)" v-if="orderType ==0 && sortValue ==3">
                视频销量
                <img src="@/assets/meng/down_up.png" />
              </th>
              <th v-else @click="sort_fun(false, 3)">
                视频销量
                <img src="@/assets/meng/up_down.png" v-if="orderType == 1 && sortValue == 3" />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th @click="sort_fun(true, 4)" v-if="orderType ==0 && sortValue ==4">
                视频销售额
                <img src="@/assets/meng/down_up.png" />
              </th>
              <th v-else @click="sort_fun(false, 4)">
                视频销售额
                <img src="@/assets/meng/up_down.png" v-if="orderType == 1 && sortValue == 4" />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th>点赞数</th>

              <th>评论数</th>

              <th>转发数</th>
            </tr>
          </thead>
          <tbody v-if="table_data01.length">
            <tr v-for="(item, i) in table_data01" :key="i + 'a'">
              <td>
                <div class="live_box">
                  <div class="live_box1">
                    <img
                      :src="item.thumPic"
                      @mousemove="move(i)"
                      @mouseout="out"
                      @click="tourl(item.url)"
                      v-errorImg:video
                    />
                    <img
                      src="@/assets/meng/play.png"
                      @mousemove="move(i)"
                      v-if="i == ind"
                      class="play"
                    />
                  </div>
                  <div class="live_box_right">
                    <div class="contentTitle" @click="linkVideoDetail(item.awemeId)">{{ item.title }}</div>
                    <div class="hotwords">
                      <span
                        v-for="(item_son, index_son) in item.hotWords"
                        :key="index_son + 'key'"
                      >{{ item_son.name }}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="cursor" @click="talentdetails(item.authorId)">
                <img class="image" :src="item.logo" v-errorImg:talent alt />
                <span class="nickName">{{item.nickName}}</span>
              </td>
              <td>{{ item.duration }}</td>
              <td>{{ item.releaseTime }}</td>

              <td>{{ format_num(item.volume) }}</td>
              <td>{{ item.amount}}</td>

              <td>{{ format_num(item.favoriteCount) }}</td>
              <td>{{ format_num(item.commentCount) }}</td>
              <td>{{ format_num(item.shareCount) }}</td>
            </tr>
          </tbody>
        </table>
        <div class="pageBox" v-if="table_data01.length">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :hide-on-single-page="true"
            :total="totalCount"
            :page-size="size"
            :current-page="page"
            @current-change="changeCurrentFn"
          ></el-pagination>
        </div>
        <div class="empty addTop" v-if="!pageLoading && !table_data01.length">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
        <div
          v-loading="pageLoading"
          v-if="pageLoading"
          class="loading"
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </template>
  </div>
</template>

<script>
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
import KChart from '../../wang/talent/tdetails/NewComponents/KChart.vue';
export default {
  name: 'VideoAnalysisShop',
  components: { BigPie, KChart },
  data() {
    return {
      KindName: '30天',
      liveTime: [],
      // 选择时间 不可选的日期.
      pickeroptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 24 * 60 * 60 * 1000
          ); // 返回 所有时间 大于 当前时间
        }
      },
      loading2: false,
      loading3: false,
      // KeyWord: '',
      // IsShieldDel: false,
      orderType: 0, //0降序 1升序
      sortValue: 4, //1发布时间 2时长 3销量 4销售额 5点赞 6评论 7转发
      table_data01: [],
      ind: null,
      page: 1,
      size: 9,
      endDate: '',
      startDate: '',
      trendX: [],
      trendY: [],
      volume: 0, //视频销量
      amount: 0, //视频销售额
      durationList: [], //视频时长分布
      totalCount: 0,
      pageLoading: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  mounted() {
    this.videoDataAPI();
    this.videoListAPI();
  },
  watch: {
    //  时间选择器
    KindName: function (newVal, oldVal) {
      // 请求表格第一页数据
      this.page = 1;
      if (this.KindName != '') {
        this.KindName = newVal;
        this.durationList = [];
        this.trendX = [];
        this.trendY = [];
        this.table_data01 = [];
        this.videoListAPI();
        this.videoDataAPI();
      }
    }
  },
  methods: {
    // 跳转视频详情
    linkVideoDetail(id) {
      let router = this.$router.resolve({
        path: '/talent_main/videoDetails',
        query: { id }
      });
      window.open(router.href, '_blank');
    },
    // 关联视频-统计数据接口
    videoDataAPI() {
      this.getTime();
      this.loading2 = true;
      this.loading3 = true;
      this.$axios
        .post('/api/shop/GetShopData2RelationAwemeStatistics', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(resp => {
          if (resp.data.code === 0) {
            this.volume = resp.data.data.volume;
            this.amount = resp.data.data.amount;
            this.durationList = resp.data.data.duration;
            this.trendX = resp.data.data.beginTime.x;
            this.trendY = resp.data.data.beginTime.y;
          }
          this.loading2 = false;
          this.loading3 = false;
        });
    },
    // 日期选择器
    onPick1() {
      this.KindName = '';
      this.page = 1;
      this.durationList = [];
      this.trendX = [];
      this.trendY = [];
      this.table_data01 = [];
      this.videoListAPI();
      this.videoDataAPI();
    },
    // 视频列表接口
    videoListAPI() {
      this.getTime();
      this.pageLoading = true;
      this.$axios
        .post('/api/shop/GetShopData2RelationAwemeList', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate, //结束时间
          PageIndex: this.page, //分页索引
          PageSize: this.size, //分页大小
          SortOrder: this.orderType, //排序
          SortValue: this.sortValue //以什么排序
          // IsShieldDel: this.IsShieldDel, //屏蔽已删除视频
          // KeyWord: this.KeyWord //视频标题关键词
        })
        .then(res => {
          if (res.data.code === 0) {
            this.table_data01 = res.data.data.list;
            this.totalCount = res.data.data.pageInfo.totalCount;
          }
          this.pageLoading = false;
        });
    },
    // 搜索
    // toSearch() {
    //   this.page = 1;
    //   this.table_data01 = [];
    //   this.videoListAPI();
    // },
    // 选中屏蔽已删除视频
    // check() {
    //   this.IsShieldDel = !this.IsShieldDel;
    //   this.table_data01 = [];
    //   this.videoListAPI();
    // },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderType = 1;
      } else {
        this.orderType = 0;
      }
      this.sortValue = parm02;
      this.table_data01 = [];
      this.videoListAPI();
    },
    out() {
      this.ind = null;
    },
    move(i) {
      this.ind = i;
    },
    tourl(url) {
      window.location.href = url;
    },
    // 获取时间值
    getTime() {
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
    },
    // 分页函数
    changeCurrentFn(page) {
      this.page = page;
      this.table_data01 = [];
      this.videoListAPI();
    },
    // 达人详情路由跳转
    talentdetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, '_blank');
    }
  }
};
</script>

<style lang="less" scoped>
.videoAnalysisShop {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  .cursor {
    cursor: pointer;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: #222;
    position: relative;
    text-indent: 9px;
  }
  .title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #fd7f2c;
    border-radius: 2px;
  }
  .top {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    .optionsBox {
      margin-left: 10px;
    }
  }
  .videoData {
    .volume {
      display: flex;
      margin-top: 21px;
      div {
        width: 354px;
        line-height: 50px;
        padding: 0 52px;
        background: #f5f5f5;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 18px;
        color: #888;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #222;
          font-family: DINAlternate-Bold;
        }
      }
    }
  }
  .chart_box {
    display: flex;
    margin-top: 40px;
    > div {
      width: 100%;

      > div {
        position: relative;
        height: 260px;
        padding-top: 40px;
        width: 95%;
        margin-bottom: 40px;
      }
    }
  }
  .videoList {
    // .dis_flex {
    //   display: flex;
    //   padding-top: 20px;
    //   .searchBox {
    //     width: 308px;
    //     height: 30px;
    //     border-radius: 4px;
    //     overflow: hidden;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     border: 1px solid #e5e5e5;
    //     overflow: hidden;
    //     // margin-top: 21px;
    //     .el-input__inner {
    //       flex: 1;
    //     }
    //     .imgBox:hover {
    //       background: url('../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
    //       background-size: 15px 15px;
    //     }
    //     .imgBox {
    //       width: 40px;
    //       height: 30px;
    //       border-radius: 0px 4px 4px 0px;
    //       display: grid;
    //       place-items: center;
    //       background: url('../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px
    //           7px,
    //         #fff;
    //       background-size: 15px 15px;
    //       img {
    //         width: 15px;
    //         height: 15px;
    //       }
    //     }
    //   }
    //   .check {
    //     margin-left: 25px;
    //     margin-right: 5px;
    //     width: 16px;
    //     height: 16px;
    //     align-self: center;
    //   }
    //   .txt {
    //     align-self: center;
    //     font-size: 14px;
    //     letter-spacing: 0px;
    //     color: #555555;
    //   }
    // }
    table {
      margin-top: 14px;
      text-align: center;
      box-sizing: border-box;
      thead {
        img {
          width: 5px;
          height: 10px;
          vertical-align: 0;
        }
        th:nth-child(1) {
          text-align: left;
          padding-left: 24px;
        }
        th:nth-child(2) {
          width: 12%;
          min-width: 160px;
          text-align: left;
          padding-left: 39px;
        }
        th:nth-child(4) {
          width: 12%;
          text-align: center;
        }
        th:nth-child(3),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7),
        th:nth-child(8),
        th:nth-child(9) {
          width: 10.1%;
        }
        th:nth-child(5),
        th:nth-child(6) {
          cursor: pointer;
        }
      }
      tbody {
        .image {
          width: 52px;
          height: 52px;
          border-radius: 50%;
        }
        .nickName {
          font-weight: 600;
        }
        .nickName:hover {
          color: #ff924b;
        }
        tr {
          height: 78px;
          .live_box {
            min-width: 220px;
            padding-left: 39px;
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            img {
              width: 50px;
              height: 50px;
              border-radius: 6px;
              cursor: pointer;
              object-fit: cover;
            }
            .live_box1 {
              position: relative;
              margin-right: 11px;
              .play {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
              }
            }
            .live_box_right {
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .contentTitle {
              &:hover {
                color: #ff924b !important;
              }
              cursor: pointer;
              font-size: 14px;
              font-weight: 600;
              color: #222222;
              white-space: nowrap;
              max-width: 200px;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: left;
            }
            .hotwords {
              display: flex;
              margin-top: 5px;
              > span {
                margin-right: 5px;
                white-space: nowrap;
                display: inline-block;
                padding: 0px 9px;
                box-sizing: border-box;
                border: solid 1px #fd7f2c;
                background-color: transparent;
                height: 22px;
                line-height: 22px;
                border-radius: 11px;
                font-size: 12px;
                color: #fd7f2c;
              }
            }
          }
          td {
            font-family: DINAlternate-Bold;
            font-size: 15px;
            color: #222;
            white-space: nowrap;
          }
          td:nth-child(2) {
            text-align: left;
          }
        }
      }
    }
  }
}
</style>